<template>
  <TopNavigation leftTitle="选择药品" rightTitle="" />
  <wd-search
    v-model="value"
    :maxlength="10"
    placeholder-left
    @search="search"
    @clear="clear"
    @cancel="cancel"
  />
  <!-- 选择药品内容区域 -->
  <view
    class="pt-10rpx items-center flex-col w-[100%] bg-[#fff] flex"
    style="height: calc(100vh - 236rpx - 180rpx); overflow: hidden; overflow: scroll"
  >
    <SelectMedicationsZj v-for="i in 10" />
  </view>

  <!-- 底部支付栏 -->
  <view class="justify-center items-center bg-[#FFF7EB] w-[100%] h-88rpx flex" style="">
    <wd-text text="已经优惠十元" custom-class="youhuiBox"></wd-text>
  </view>
  <view class="w-[100%] h-130rpx bg-[#fff] flex justify-center">
    <view class="justify-between items-center w-[90%] h-[100%] flex" style="">
      <view class="items-center flex" style="">
        <img src="@/static/yaoping.png" alt="" class="w-80rpx h-84rpx" />
        <view class="flex-col flex" style="">
          <wd-text custom-class="qianBox" text="￥15.00"></wd-text>
          <wd-text custom-class="mingxiBox" text="细节明细"></wd-text>
        </view>
      </view>
      <view>
        <wd-button type="success">成功按钮</wd-button>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import TopNavigation from "@/components/TopNavigation.vue";
import SelectMedicationsZj from "@/components/SelectMedicationsZj.vue";
const value = ref<string>("");

function search() {
  console.log("搜索");
}
function clear() {
  console.log("重置");
}
function cancel() {
  console.log("取消");
}
</script>
<style lang="scss" scoped>
.youhuiBox {
  font-size: 24rpx !important;
  font-weight: regular !important;
  line-height: 36rpx !important;
  color: #f2994a !important;
  text-align: left;
  letter-spacing: 0px;
}
.qianBox {
  font-size: 48rpx !important;
  font-weight: bold !important;
  line-height: 48rpx !important;
  color: #121826 !important;
  text-align: left;
  letter-spacing: 0px;
}
.mingxiBox {
  font-size: 24rpx !important;
  font-weight: regular !important;
  line-height: 36rpx !important;
  color: #3c3e42 !important;
  text-align: left;
  letter-spacing: 0px;
}
.yaopinBox {
  font-size: 30rpx !important;
  font-weight: medium !important;
  line-height: 42rpx !important;
  color: #121826 !important;
  text-align: left;
  letter-spacing: 0px;
}
.cyfBox {
  font-size: 24rpx !important;
  font-weight: regular !important;
  line-height: 32rpx !important;
  color: #ffffff !important;
  text-align: left;
  letter-spacing: 0px;
}
.hssBox {
  font-size: 28rpx !important;
  font-weight: regular !important;
  line-height: 42rpx !important;
  color: #979797 !important;
  text-align: left;
  letter-spacing: 0px;
}
.zjqBox {
  font-size: 32rpx !important;
  font-weight: semibold !important;
  line-height: 48rpx !important;
  color: #eb5757 !important;
  text-align: left;
  letter-spacing: 0px;
}
</style>
